import { Mutation /* , Action */ } from 'vuex';
import { StoreModuleType } from '@/utils/store';
import type { LocationQueryRaw } from 'vue-router';
import { h } from 'vue';
import {
  SettingOutlined,
} from '@ant-design/icons-vue';

export interface MenuType {
  key: string;
  icon: any;
  label: string;
  title: string;
  path: string;
  oldQuery?: LocationQueryRaw;
  query?: LocationQueryRaw;
}

export interface StateType {
  // 站点名称
  systemTitle: string;
  // 头部菜单选定项
  headSelctedNav?: string;
  // tab菜单开启
  tabNavEnable: boolean;
  // 头部tab导航列表
  headTabNavList: any[];
  // qiankun.js startLoading
  qiankunStartLoading: boolean;
  // 右侧主页面div
  qiankunlayoutRightMain: Element | null;
  currentActiveTabMenu: MenuType | null;
  menuList: MenuType[];
}

export interface ModuleType extends StoreModuleType<StateType> {
  state: StateType;
  mutations: {
    setSystemTitle: Mutation<StateType>;
    setHeadSelctedNav: Mutation<StateType>;
    setTabNavEnable: Mutation<StateType>;
    setHeadTabNavList: Mutation<StateType>;
    closeCurrentHeadTabNav: Mutation<StateType>;
    setQiankunStartLoading: Mutation<StateType>;
    setQiankunlayoutRightMain: Mutation<StateType>;
    addOrChangeHeadTabNav: Mutation<StateType>;
    closeHeadTabNav: Mutation<StateType>;
    replaceLocationHeadTabNav: Mutation<StateType>;
  };
  // actions: {};
}

const initState: StateType = {
  systemTitle: 'Loading...',
  tabNavEnable: true,
  headTabNavList: [],
  qiankunStartLoading: false,
  qiankunlayoutRightMain: null,
  currentActiveTabMenu: null, //默认首页
  menuList: [
    {
      key: 'home',
      icon: () => h(SettingOutlined),
      label: '首页',
      title: '首页',
      path: '/child/tyzh/#/home',
    },
    {
      key: 'workflow',
      icon: () => h(SettingOutlined),
      label: '流程中心',
      title: '流程中心',
      path: '/child/tyzh/#/workflow',
    },
    {
      key: 'businessApply',
      icon: () => h(SettingOutlined),
      label: '业务办理',
      title: '业务办理',
      path: '/child/tyzh/#/businessApply',
    },
  ],
};

const StoreModel: ModuleType = {
  namespaced: true,
  name: 'global',
  state: {
    ...initState,
  },
  mutations: {
    setSystemTitle(state, payload) {
      state.systemTitle = payload;
    },
    setHeadSelctedNav(state, payload) {
      state.headSelctedNav = payload;
    },
    setTabNavEnable(state, payload) {
      state.tabNavEnable = payload;
    },
    setHeadTabNavList(state, payload) {
      console.info('setHeadTabNavList', payload);
      state.headTabNavList = payload;
    },
    addOrChangeHeadTabNav(state, payload: MenuType | null) {
      if (payload != null) {
        const addMenu = state.headTabNavList.findIndex(
          (item) => payload.key == item.key
        );
        if (addMenu < 0) {
          // state.headTabNavList = [
          //   ...state.headTabNavList,
          //   payload
          // ]
          // state.headTabNavList.push(payload);
          state.headTabNavList.unshift(payload);
        }
      }
      state.currentActiveTabMenu = payload;
    },
    /**
     * 关闭当前tabNav，并跳转自定义路由
     * @param state
     * @param payload Function 回调
     */
    closeCurrentHeadTabNav(state, payload: any) {
      // const navList: LivebosMenu[] = state.headTabNavList.filter(
      //   (item2: LivebosMenu) => !equalTabNav(state.currentActiveTabMenu, item2)
      // );
      // state.headTabNavList = [...navList];
      // if (typeof payload === 'function') {
      //   payload();
      // }
    },
    closeHeadTabNav(state, payload: MenuType) {
      const closeIndex = state.headTabNavList.findIndex(
        (item) => payload.key == item.key
      );
      if (closeIndex > -1) {
        // state.headTabNavList = [
        //   ...state.headTabNavList,
        //   payload
        // ]
        state.headTabNavList = state.headTabNavList.filter(
          (item) => item.key !== payload.key
        );
        const lastIndex = closeIndex - 1;
        if (lastIndex >= 0) {
          state.currentActiveTabMenu = state.headTabNavList[lastIndex];
        } else if (state.headTabNavList.length > 0) {
          state.currentActiveTabMenu = state.headTabNavList[0];
        } else {
          state.currentActiveTabMenu = null;
        }
      }
    },
    replaceLocationHeadTabNav(state, payload) {
      const sourceKey = payload.sourceKey;
      const movedIndex = payload.movedIndex;
      const sourceIndex = state.headTabNavList.findIndex(
        (item) => item.key == sourceKey
      );
      const sourceMenu = state.headTabNavList.find(
        (item) => item.key == sourceKey
      );
      // 先删除
      state.headTabNavList.splice(sourceIndex, 1);
      // 再添加
      if (sourceMenu) {
        state.headTabNavList.splice(sourceIndex + movedIndex, 0, sourceMenu);
      }
    },
    setQiankunStartLoading(state, payload) {
      state.qiankunStartLoading = payload;
    },
    setQiankunlayoutRightMain(state, payload: Element) {
      state.qiankunlayoutRightMain = null;
      state.qiankunlayoutRightMain = payload;
    },
  },
  actions: {},
};

export default StoreModel;
